<nz-layout>
  <nz-header>
    <div class="header">
      <div class="logo">
        <!-- <img src="/assets/img/logo.png" alt="" srcset=""> -->
        <app-logo></app-logo>
      </div>

      <div style="flex:1 1 auto;">

      </div>
      <nz-dropdown>
        <a nz-dropdown class="dropdown">
          {{ ('language' | translate) || '语言' }} <i nz-icon type="down"></i>
        </a>
        <ul nz-menu nzSelectable>
          <li nz-menu-item (click)="changeLang('zh')">
            <a>中文</a>
          </li>
          <li nz-menu-item (click)="changeLang('en')">
            <a>English</a>
          </li>
        </ul>
      </nz-dropdown>
    </div>
  </nz-header>
  <nz-content [style.min-height.px]="current === 1 ? 800 : 750">
    <div class="content">
      <div class="content-header">
        <div class="content-steps">
          <app-wenyao-steps [(current)]="current" currentEnable="false" [stepTitles]="stepTitles"></app-wenyao-steps>
        </div>
      </div>
      <div class="content-body">
        <div class="form-content-input-account" [hidden]="current !== 0">
          <h1>重置密码</h1>
          <div class="tab-line">
            <div class="form-tabsset">
              <div class="form-tabs" (click)="nzSelectedIndex = 0">
                <span class="form-tabs-title " [class.form-tabs-title-active]="nzSelectedIndex === 0">邮箱</span>
                <p *ngIf="nzSelectedIndex === 0" class="form-tabs-title-active-bottom"></p>
              </div>
              <div class="form-tabs" (click)="nzSelectedIndex = 1">
                <span class="form-tabs-title" [class.form-tabs-title-active]="nzSelectedIndex === 1">手机</span>
                <p *ngIf="nzSelectedIndex === 1" class="form-tabs-title-active-bottom"></p>
              </div>
            </div>
          </div>
          <div class="form-line">
            <form class="form" [formGroup]="emailForm" nz-form nzLayout="vertical" [hidden]="nzSelectedIndex !== 0">
              <nz-form-item>
                <nz-form-label>
                  <label for="">账号 *</label>
                </nz-form-label>
                <nz-form-control>
                  <input nz-input placeholder="输入邮箱" name="email" formControlName="email">
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <div class="submit-button-group">
                  <button class="submit-button" nz-button nzType="primary" [disabled]="!emailForm.valid"
                    (click)="formNext(1)">下一步</button>
                </div>
              </nz-form-item>
            </form>
            <form class="form" [formGroup]="phoneForm" nz-form nzLayout="vertical" [hidden]="nzSelectedIndex !== 1">
              <nz-form-item>
                <nz-form-label>
                  <label for="">账号 *</label>
                </nz-form-label>
                <nz-form-control>
                  <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
                    <ng-template #addOnBeforeTemplate>
                      <nz-select formControlName="regionNumber" style="width: 70px;">
                        <nz-option *ngFor="let item of regionNumbers; let i = index" [nzLabel]="'+' + item.number"
                          [nzValue]="item.number"></nz-option>
                      </nz-select>
                    </ng-template>
                    <input nz-input placeholder="输入手机号码" formControlName="phone" name="phone" type="tel" id="phone"
                      maxlength="11">
                  </nz-input-group>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <div class="submit-button-group">
                  <button class="submit-button" nz-button nzType="primary" [disabled]="!phoneForm.valid"
                    (click)="formNext(2)">下一步</button>
                </div>
              </nz-form-item>
            </form>
          </div>
        </div>

        <div class="form-content-change-password" [hidden]="current !== 1">
          <h1>修改密码</h1>
          <div class="password-change-label">
            <p class="password-change-label-title">
              验证发送至
            </p>
            <p class="password-change-label-title-small">
              <span>{{account}}</span>
              <button class="button-link" (click)="current = 0">更改账号</button>
            </p>
          </div>
          <form class="form" nz-form nzLayout="vertical" [formGroup]="passwordForm">
            <nz-form-item>
              <nz-form-label>验证码 *</nz-form-label>
              <nz-form-control>
                <nz-input-group nzCompact>
                  <input type="text" nz-input style="width: 70%;" formControlName="authCode">
                  <input type="button" nz-input (click)="getAuthCodeLable()" [value]="authCodeLable" style="width:30%;">
                </nz-input-group>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label>新密码 *</nz-form-label>
              <nz-form-control>
                <input nz-input type="password" placeholder="请输入新密码" formControlName="newPassword" name="newPassword">
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label>确认密码 *</nz-form-label>
              <nz-form-control>
                <input nz-input type="password" placeholder="请再次输入密码" formControlName="confirmPassword"
                  name="confirmPassword">
                <nz-form-explain style="color: red;"
                  *ngIf="passwordForm.errors?.passwordError && (passwordForm.touched || passwordForm.dirty)">
                  两次密码不一致</nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <div class="submit-button-group" style="margin-top: 30px">
                <button class="submit-button" nz-button nzType="primary" [disabled]="!passwordForm.valid"
                  (click)=" current = 2">确认修改</button>
              </div>
            </nz-form-item>
          </form>
        </div>

        <div class="form-content-change-success" [hidden]="current !== 2">
          <div>
            <i class="icon-success"></i>
          </div>
          <div class="label-success">重置密码成功</div>
          <div class="submit-button-group">
            <button class="submit-button" nz-button nzType="primary" routerLink="/pages/login">立即登录</button>
          </div>
        </div>
      </div>
    </div>
  </nz-content>
  <nz-footer>
    <div class="footer">
      <span>
        Copyright © 2019 Aoot Inc. 保留所有权利。隐私政策 | 使用条款 | 销售政策 | 法律信息 | 网站地图
      </span>
      <br />
      <span>
        京公安网安备 1101050258978 京ICP备10215996 营业执照 </span>
    </div>

  </nz-footer>
</nz-layout>